<script lang="ts" setup>
import { QForm, type FormItemRows } from '@meetjs/element-plus-kit'
import { type FormRules } from 'element-plus'
import { getDicts } from '@/api/system/dict/index'
import { addType, updateType } from '@/api/interface/sys'
import type { InterfaceParams } from '@/api/interface/sys/type'

const emits = defineEmits<{
	refresh: []
}>()
const visible = ref(false)
const loading = ref(false)
const title = ref<'新增接口' | '修改接口'>('新增接口')
// TODO:后续优化类型
const formRef = ref()
const baseFormData: InterfaceParams = {
	businessSystemName: '',
	businessSystemCode: '',
	systemType: '',
	baseUrl: '',
	remark: '',
	contactPerson: '',
	contactPhone: '',
	contactEmail: ''
}
const dialogFormValue = ref<InterfaceParams>({ ...baseFormData })
const dialogOptions = ref<FormItemRows[]>([
	{
		type: 'input',
		label: '业务系统名称',
		prop: 'businessSystemName'
	},
	{
		type: 'input',
		label: '业务系统代码',
		prop: 'businessSystemCode'
	},
	{
		type: 'select',
		label: '系统类型',
		prop: 'systemType',
		options: []
	},
	{
		type: 'input',
		label: '基础URL',
		prop: 'baseUrl'
	},
	{
		type: 'input',
		label: '描述',
		prop: 'remark'
	},
	{
		type: 'input',
		label: '联系人',
		prop: 'contactPerson'
	},
	{
		type: 'input',
		label: '联系电话',
		prop: 'contactPhone'
	},
	{
		type: 'input',
		label: '联系邮箱',
		prop: 'contactEmail'
	}
])

const rules = reactive<FormRules<{ [k: string]: any }>>({
	businessSystemName: [
		{
			required: true,
			message: '请输入业务系统名称'
		}
	],
	businessSystemCode: [
		{
			required: true,
			message: '请输入业务系统代码'
		}
	],
	systemType: [
		{
			required: true,
			message: '请选择系统类型'
		}
	],
	contactPerson: [
		{
			required: true,
			message: '请输入联系人'
		}
	],
	contactPhone: [
		{
			required: true,
			message: '请输入联系电话'
		}
	],
	contactEmail: [
		{
			required: true,
			message: '请输入联系邮箱'
		}
	]
})

const init = (type: 'add' | 'edit', editForm?: InterfaceParams) => {
	visible.value = true
	title.value = type === 'add' ? '新增接口' : '修改接口'

	if (editForm) {
		dialogFormValue.value = { ...editForm }
	} else {
		dialogFormValue.value = { ...baseFormData }
	}
	setTimeout(() => {
		formRef.value?.clearValidate()
	})
}

const submit = () => {
	formRef.value?.validate(async (valid: boolean) => {
		if (valid) {
			try {
				loading.value = true
				const apiFunc = title.value === '新增接口' ? addType : updateType
				await apiFunc({ ...dialogFormValue.value })
				const message = title.value === '新增接口' ? '新增成功' : '修改成功'
				ElMessage.success(message)
				visible.value = false
				emits('refresh')
			} finally {
				loading.value = false
			}
		}
	})
}

const getMethods = () => {
	getDicts('sys_interface_sys_type').then(data => {
		dialogOptions.value[2].options = data
	})
}
getMethods()

defineExpose({
	init
})
</script>
<template>
	<ElDialog
		v-model="visible"
		:title="title"
		:close-on-click-modal="false"
		width="800px"
	>
		<QForm
			ref="formRef"
			label-width="120px"
			:model="dialogFormValue"
			:form-options="dialogOptions"
			:rules="rules"
		/>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button
				type="primary"
				:loading="loading"
				@click="submit"
			>
				确定
			</el-button>
		</template>
	</ElDialog>
</template>

<style lang="scss" scoped></style>
